<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 项目列表</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/detail.css}" type="text/css">
    <!--    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>-->
    <script th:src="@{/bootstrap/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <!--    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>-->
    <script th:src="@{/script/common.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<style type="text/css">
    .list-loading {
        display: none;
        height: 50px !important;
        line-height: 50px;
        color: #4d4d4d;
        z-index: 999;
        border: 1px solid #fed4c1;
        top: -51px;
        box-sizing: border-box;
    }

    .loading-container {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 50px;
    }
</style>
<body>
<div id="app">
    <div th:replace="common/public::head"></div>

    <!--列表-->
    <div class="page-filter wrap">
        <div class="breadcrumbs"><a th:href="@{/}">首页</a>&gt;<span class="cur">投资列表</span></div>
        <div class="invest-filter" data-target="sideMenu">
            <div class="filter-inner clearfix">
                <div class="filter-item">
                    <div class="hd">
                        <h3>筛选投资项目</h3>
                        <!--<label>
                            <input id="filterMulti" name="multiple_choice" type="checkbox">
                            多选</label>-->
                    </div>
                    <div class="bd search_type">
                        <dl>
                            <dt>项目类型</dt>
                            <dd>
                                <ul class="pro_type">
                                    <li class="n1"><a @click="typeParams(0)" class="active" href="javascript:void(0);" id="post_type_">不限</a></li>
                                    <li class="n3"><a @click="typeParams(2)" href="javascript:void(0);" id="post_type_house">推荐标</a></li>
                                    <li class="n4"><a @click="typeParams(3)" href="javascript:void(0);" id="post_type_bridge">单车变摩托</a></li>
                                    <li class="n5"><a @click="typeParams(4)" href="javascript:void(0);" id="post_type_worth">散标</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>年利率</dt>
                            <dd>
                                <ul class="pro_rate">
                                    <li class="n1"><a @click="rateParams(0)" class="active" href="javascript:void(0);" id="borrow_interestrate_">不限</a></li>
                                    <li class="n2"><a @click="rateParams(1)" href="javascript:void(0);" id="borrow_interestrate_1">12%以下</a></li>
                                    <li class="n3"><a @click="rateParams(2)" href="javascript:void(0);" id="borrow_interestrate_2">12%-14%</a></li>
                                    <li class="n4"><a @click="rateParams(3)" href="javascript:void(0);" id="borrow_interestrate_3">14%-16%</a></li>
                                    <li class="n5"><a @click="rateParams(4)" href="javascript:void(0);" id="borrow_interestrate_4">16%及以上</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl>
                            <dt>期限</dt>
                            <dd>
                                <ul class="pro_date">
                                    <li class="n1"><a @click="dateParams(0)" class="active" href="javascript:void(0);" id="spread_month_">不限</a></li>
                                    <li class="n2"><a @click="dateParams(1)" href="javascript:void(0);" id="spread_month_1">3个月以下</a></li>
                                    <li class="n3"><a @click="dateParams(2)" href="javascript:void(0);" id="spread_month_2">3-6个月</a></li>
                                    <li class="n4"><a @click="dateParams(3)" href="javascript:void(0);" id="spread_month_3">6-9个月</a></li>
                                    <li class="n5"><a @click="dateParams(4)" href="javascript:void(0);" id="spread_month_4">9-12个月</a></li>
                                    <li class="n6"><a @click="dateParams(5)" href="javascript:void(0);" id="spread_month_5">12个月以上</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="repayment" style="display: none">
                            <dt>还款方式</dt>
                            <dd>
                                <ul class="pro_repay">
                                    <li class="n1"><a @click="repayParams(0)" class="active" href="javascript:void(0);" id="repay_style_">不限</a></li>
                                    <li class="n2"><a @click="repayParams(1)" href="javascript:void(0);" id="repay_style_end">到期还本付息</a></li>
                                    <li class="n2"><a @click="repayParams(2)" href="javascript:void(0);" id="repay_style_endmonth">按月付息,到期还本</a></li>
                                    <li class="n2"><a @click="repayParams(3)" href="javascript:void(0);" id="repay_style_month">等额本息</a></li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="common-problem">
                    <h3>常见问题</h3>
                    <ul>
                        <li v-for="notice in noticeList.slice(0,5)" v-if="notice.classify == '常见问题'">
                            <a :href="'base/notice-detail/'+notice.id | urlFilter">{{notice.title}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="invest-list mrt30 clearfix">
            <div class="hd">
                <h3>投资列表</h3>
                <div class="count">
                    <ul>
                        <li class="line">投资交易金额&nbsp;&nbsp;<span class="f20 bold">{{countInvestMoney}}元</span></li>
                        <li>累计赚取收益&nbsp;&nbsp;<span class="f20 bold">{{sumProfit}}元</span></li>
                    </ul>
                </div>
            </div>
            <div class="bd">
                <div class="invest-table clearfix" style="position: relative">
                    <div class="title clearfix head">
                        <ul>
                            <li class="col-330">项目标题</li>
                            <li class="col-180"><a @click="proSort('total')" href="javascript:void(0);">总金额</a></li>
                            <li class="col-110"><a @click="proSort('rate')" href="javascript:void(0);">年利率</a></li>
                            <li class="col-150"><a @click="proSort('lock')" href="javascript:void(0);">锁定期限</a></li>
                            <li class="col-150">还款方式</li>
                            <li class="col-120"><a @click="proSort('process')" href="javascript:void(0);">投资进度</a></li>
                            <li class="col-120-t">操作</li>
                        </ul>
                    </div>
                    <!------------投资列表-------------->
                    <!--加载条-->
                    <div class="loading-container list-loading" id="load"
                         th:styleappend="|background: url(@{/images/loading2.gif}) 535px center no-repeat #fdf6f3;|">
                    </div>
                    <div class="g-tc data-empty" style="text-align: center;height: 260px;"
                         th:styleappend="|background: url(@{/images/empty-f13aeecb6a.png}) center center no-repeat;|" v-if="productList.length == 0">
                        <p style="padding-top: 200px;text-align: center;">暂无记录</p>
                    </div>
                    <div class="item" v-for="pro in productList">
                        <ul>
                            <li class="col-330 col-t">
                                <!--<a th:href="@{http://localhost:8080/erb/base/invest-detail/1}" target="_blank">
                                    <i class="icon icon-che" title="车易贷"></i>
                                </a>-->
                                <a :href="'base/product-detail/'+pro.pid | urlFilter" :title="pro.pname" class="f18"
                                   target="_blank">{{pro.pname}}</a>
                            </li>
                            <li class="col-180"><span class="f20 c-333">{{pro.total}}</span>元</li>
                            <li class="col-110 relative"><span class="f20 c-orange">{{(pro.rate) * 100 | formatDouble}}% </span></li>
                            <li class="col-150"><span class="f20 c-333">{{pro.lockDateMonth}}</span>个月</li>
                            <li class="col-150" v-if="pro.repayType == 1">到期还本付息</li>
                            <li class="col-150" v-if="pro.repayType == 2">按月付息,到期还本</li>
                            <li class="col-150" v-if="pro.repayType == 3">等额本息</li>
                            <li class="col-120">
                                <div class="circle">
                                    <div class="left progress-bar">
                                        <!--进度图片-->
                                        <div :style="{'background-position': -10 - 60 * (Math.round((pro.haveMoney/pro.total)*10)) + 'px -40px'}"
                                             class="progress-bgPic progress-bfb5">
                                            <div class="show-bar"> {{pro.haveMoney/pro.total*100 | formatDouble}}%</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="col-120-2">
                                <a :href="'base/product-detail/'+pro.pid | urlFilter" class="ui-btn btn-gray"
                                   v-if="(pro.haveMoney/pro.total) < 1">购买</a>
                                <a :href="'base/product-detail/'+pro.pid | urlFilter" class="ui-btn btn-gray"
                                   style="background: #dededd!important;cursor: not-allowed;color: #fff;" v-if="(pro.haveMoney/pro.total) >= 1">已售罄</a>
                            </li>
                        </ul>
                    </div>
                    <!------------投资列表-------------->
                </div>
                <div class="pagination clearfix mrt30">
                    <span class="page"></span>
                    <!--<dl class="page-select">
                        <dt><span>{{pager.pageSize}}</span><i class="icon icon-down"></i></dt>
                        <dd style="display: none;">
                            <ul name="nump" id="jsnump">
                                <li><a href="##">5</a></li>
                                <li><a href="##">10</a></li>
                                <li><a href="##">20</a></li>
                            </ul>
                        </dd>
                    </dl>-->
                </div>
            </div>
        </div>
    </div>

    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
</div>
<script th:src="@{/script/product_list.js}" type="text/javascript"></script>
<script type="text/javascript">

    const baseUrl = '[[@{/base/}]]';

    new Vue({
        el: '#app',
        data: {
            typeList: [],
            productList: [], //投标产品列表
            pro_params: {
                ptype: 0,
                // rate:0,
                minRate: 0,
                maxRate: 0,
                // lockDateMonth:0,
                minLockDate: 0,
                maxLockDate: 0,
                repayType: 0
            },
            pager: {
                currPage: 1,
                pageSize: 3,
                totalRow: 0,
                totalPage: 0
            },
            noticeList: [], //公告
            //总投资数量
            countInvestMoney: 0,
            //总收益
            sumProfit: 0,
            order: {
                total: 0,
                rate: 0,
                lock: 0,
                process: 0
            }
        },
        filters: {
            formatDouble: function (value) {
                return (value).toFixed(2);
            },
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        methods: {
            //加载所有投资产品
            loadProductList: function () {
                $('#load').show();
                axios.get(baseUrl + 'product/product-list', {
                    params: {
                        type: this.pro_params.ptype,
                        pageSize: this.pager.pageSize,
                        currPage: this.pager.currPage
                    }
                })
                    .then(response => {
                        $('#load').hide();
                        console.log(response);
                        this.productList = response.data.obj.productList;
                        this.pager = response.data.obj.pager;
                        this.initPage();
                    })
                    .catch(error =>
                        console.log(error)
                    )
            },
            //加载公告
            loadNoticeList: function () {
                axios.get(baseUrl + 'findNotice')
                    .then(response => {
                        console.log(response);
                        this.noticeList = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //加载投资总金额
            loadCountInvestMoney: function () {
                axios.get(baseUrl + 'countInvestMoney')
                    .then(response => {
                        this.countInvestMoney = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //加载总收益金额
            loadSumProfit: function () {
                axios.get(baseUrl + 'sumProfit')
                    .then(response => {
                        this.sumProfit = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //排序
            proSort: function (action) {
                let productList = this.productList;
                let $sort = $('.head a');
                switch (action) {
                    case 'total':
                        let total = this.order.total;
                        if (total == 0) {
                            this.order.total = 1;
                            productList.sort((a, b) => {
                                return a.total - b.total;
                            });
                            $sort.eq(0).css('background', 'url(../images/icon_sort.jpg) right -17px no-repeat');
                        } else if (total == 1) {
                            this.order.total = 0;
                            productList.sort((a, b) => {
                                return b.total - a.total;
                            });
                            $sort.eq(0).css('background', 'url(../images/icon_sort.jpg) right -37px no-repeat');
                        }
                        break;
                    case 'rate':
                        let rate = this.order.rate;
                        if (rate == 0) {
                            this.order.rate = 1;
                            productList.sort((a, b) => {
                                return a.rate - b.rate;
                            });
                            $sort.eq(1).css('background', 'url(../images/icon_sort.jpg) right -17px no-repeat');
                        } else if (rate = 1) {
                            this.order.rate = 0;
                            productList.sort((a, b) => {
                                return b.rate - a.rate;
                            });
                            $sort.eq(1).css('background', 'url(../images/icon_sort.jpg) right -37px no-repeat');
                        }
                        break;
                    case 'lock':
                        let lock = this.order.lock;
                        if (lock == 0) {
                            this.order.lock = 1;
                            productList.sort((a, b) => {
                                return a.lockDateMonth - b.lockDateMonth;
                            });
                            $sort.eq(2).css('background', 'url(../images/icon_sort.jpg) right -17px no-repeat');
                        } else if (lock = 1) {
                            this.order.lock = 0;
                            productList.sort((a, b) => {
                                return b.lockDateMonth - a.lockDateMonth;
                            });
                            $sort.eq(2).css('background', 'url(../images/icon_sort.jpg) right -37px no-repeat');
                        }
                        break;
                    case 'process':
                        let process = this.order.process;
                        if (process == 0) {
                            this.order.process = 1;
                            productList.sort((a, b) => {
                                return (a.haveMoney / a.total) - (b.haveMoney / b.total);
                            });
                            $sort.eq(3).css('background', 'url(../images/icon_sort.jpg) right -17px no-repeat');
                        } else if (process = 1) {
                            this.order.process = 0;
                            productList.sort((a, b) => {
                                return (b.haveMoney / b.total) - (a.haveMoney / a.total);
                            });
                            $sort.eq(3).css('background', 'url(../images/icon_sort.jpg) right -37px no-repeat');
                        }
                        break;
                }

            },
            //筛选类型
            typeParams: function (type) {
                this.pro_params.ptype = type;
                //如果不是散标则清空还款方式参数
                if (type != 3) {
                    this.pro_params.repayType = null;
                }
                //初始化当前页为1
                this.pager.currPage = 1;
                this.screenProductList();
                //清空分页点击事件
                $('.page').unbind('click');
            },

            //筛选利率
            rateParams: function (rate) {
                if (rate == 0) {
                    this.pro_params.rate = null;
                } else {
                    this.pro_params.rate = 0;
                    switch (rate) {
                        case 1:
                            this.pro_params.minRate = 0;
                            this.pro_params.maxRate = 0.12;
                            break;
                        case 2:
                            this.pro_params.minRate = 0.12;
                            this.pro_params.maxRate = 0.14;
                            break;
                        case 3:
                            this.pro_params.minRate = 0.14;
                            this.pro_params.maxRate = 0.16;
                            break;
                        case 4:
                            this.pro_params.minRate = 0.16;
                            this.pro_params.maxRate = 0.5;
                            break;
                    }
                }
                this.pager.currPage = 1;
                this.screenProductList();
                $('.page').unbind('click');
            },
            //筛选锁定时间
            dateParams: function (date) {
                if (date == 0) {
                    this.pro_params.lockDateMonth = null;
                } else {
                    this.pro_params.lockDateMonth = 0;
                    switch (date) {
                        case 1:
                            this.pro_params.minLockDate = 0;
                            this.pro_params.maxLockDate = 3;
                            break;
                        case 2:
                            this.pro_params.minLockDate = 3;
                            this.pro_params.maxLockDate = 6;
                            break;
                        case 3:
                            this.pro_params.minLockDate = 6;
                            this.pro_params.maxLockDate = 9;
                            break;
                        case 4:
                            this.pro_params.minLockDate = 9;
                            this.pro_params.maxLockDate = 12;
                            break;
                        case 5:
                            this.pro_params.minLockDate = 12;
                            this.pro_params.maxLockDate = 24;
                            break;
                    }
                }
                this.pager.currPage = 1;
                this.screenProductList();
                $('.page').unbind('click');
            },
            //筛选还款方式
            repayParams: function (repay) {
                this.pro_params.repayType = repay;
                this.pager.currPage = 1;
                this.screenProductList();
                $('.page').unbind('click');
            },
            //请求数据
            screenProductList: function () {
                //初始化排序
                $('.head a').css('background', 'url(../images/icon_sort.jpg) right 3px no-repeat');
                this.order.total = 0;
                this.order.rate = 0;
                this.order.lock = 0;
                this.order.process = 0;
                $('#load').show();
                axios.get(baseUrl + 'product/product-list', {
                    params: {
                        type: this.pro_params.ptype,
                        rate: this.pro_params.rate,
                        minRate: this.pro_params.minRate,
                        maxRate: this.pro_params.maxRate,
                        lockDateMonth: this.pro_params.lockDateMonth,
                        minLockDate: this.pro_params.minLockDate,
                        maxLockDate: this.pro_params.maxLockDate,
                        repayType: this.pro_params.repayType,
                        currPage: this.pager.currPage,
                        pageSize: this.pager.pageSize
                    }
                })
                    .then(response => {
                        $('#load').hide();
                        console.log(response);
                        this.productList = response.data.obj.productList;
                        this.pager = response.data.obj.pager;
                        this.initPage();
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //初始化分页
            initPage: function () {
                //生成分页
                let _this = this;
                if (this.productList.length <= 0) {
                    $('.page').hide();
                    return;
                }
                $('.page').show();
                $('.page').createPage({
                    totalPage: this.pager.totalPage,
                    currPage: this.pager.currPage,
                    //点击页码
                    backFn: function (p) {
                        console.log("回调函数：" + p);
                        _this.pager.currPage = p;
                        _this.screenProductList();
                    }
                });
                //选中当前页码
                $('.page > a.page_num').each(function (i, e) {
                    if (parseInt($(e).text()) == _this.pager.currPage) {
                        $(e).addClass('curr');
                    }
                });
            }
        },
        mounted() {
            this.loadProductList();
            this.loadNoticeList();
            this.loadCountInvestMoney();
            this.loadSumProfit();
        }
    });

    /*//分页大小选择
    let $page_options =  $('.page-select a');
    let $page_span =  $('.page-select span');
    $('.icon-down').click(function () {
        if ($('.page-select > dd').css('display') == 'none'){
            $('.page-select > dd').show();
        } else {
            $('.page-select > dd').hide();
        }
    });
    $.each($page_options,function (i,e) {
        $(e).click(function () {
            $page_span.text($(e).text());
            // $nums.eq($(e).text()-1).addClass('curr').siblings('a').removeClass('curr');
            $('.page-select > dd').hide();
        })
    });*/

    //筛选
    $('.search_type li a').click(function () {
        $(this).addClass('active').parent().siblings().children().removeClass('active');
    });

    $('.pro_type li a').click(function () {
        let id = $(this).attr('id');
        if (id == 'post_type_worth') {
            $('.repayment').slideDown();
        } else {
            $('.repayment').slideUp();
            $('.repayment a').removeClass('active');
            $('.repayment a').eq(0).addClass('active');
        }
    });
</script>
</body>
</html>
